<template>
	<view class="fix-top" ref="ptop">
		<view class="nav-header-box">
			<view @click="back" class="back-icon">
				<uv-icon color="#999" name="arrow-left" size="22" />
			</view>
			<view @click="showShipLines()" class="title">
				<p>{{nowLine.fromCityName}}</p>
				<img alt="" src="/static/traffic/icon/arrows_circle.png">
				<p>{{nowLine.toCityName}}</p>
			</view>
			<view class="right"></view>
		</view>
		<view class="date-box">
			<view class="date-l" id="js-date-box">
				<view class="date-inner" id="js-date-inner">
					<view :class="['date-item',nowDate==item.ymd?'active':'']" :key="i" @click="chooseDate(item,i)"
						v-for="(item,i) in dateList">
						<p>{{item.text}}</p>
						<p class="day">{{item.month}}/{{item.day}}</p>
					</view>
				</view>
			</view>
			<view @click="openCalendar()" class="date-r">
				<view class="t">
					<uv-icon id="calendar" alt="" name="/static/traffic/icon/calendar.png"></uv-icon>
				</view>
				<view class="b">
					<uv-icon color="#999" name="arrow-down" size="20"></uv-icon>
				</view>
			</view>
		</view>
	</view>
	<view class="main-box" ref="pcontent" style="padding-top: 186rpx;">
		<!--为空提示-->
		<view class="ship-line-empty" id="js_msg" v-if="ticketDetail.length==0">
			<image src="/static/img/empty_img.png" />
			<view class="ship-line-notice">
				<view class="js_msg_text" style="padding:10px;color:#999; font-size: 14px;">
					温馨提示：
					<span id="js_msg_text" style="font-size: 14px;">系统维护中</span>
					<span id="js_msg_text" style="font-size: 14px;">
						<br />1、凌晨01:00左右不显示航班，表示系统进行维护，23:00 至 04:30不办理退票业务！
						<br />2、当天不显示航班，表示已停航或已停运！
						<br />3、提前日期不显示航班，表示已停航或未开售，请关注安安游网站最新动态！
					</span>
				</view>
				<view style="text-align:center" v-if="js_btn_next_day">
					<a @click="goNextDay()" style="font-size:14px;" open-type="navigate">点击链接预约未开售航班
						》</a>
				</view>
				<a @click="goNextDay()" class="ship-line-notice-a" href="javascript:;" v-if="js_btn_next_day">
					查看下一天航班</a>
				<a @click="snatchStick" class="ship-line-notice-a" href="javascript:;" v-show="snatch == 1">抢票入口</a>
				<a @click="serviceStick" class="ship-line-notice-a" href="javascript:;" v-show="service == 1">指导抢票</a>
			</view>
		</view>
		<!--为空提示·温馨提示：1、每天系统01:55~03:35进行维护！2、当天下午不显示航班的是已结束！3、提前日期不显示航班的是停航或未开售，请您实时关注网上最新的航班变动情况！-->
		<view class="flight-list">
			<view :class="['flight-item', (item.sale_num<1)?'gray':'']" :key="item.id" @click="chooseFlight(item)"
				v-for="item in ticketDetail">
				<view class="l">
					<p class="time">{{item.DepartTime}}</p>
					<p>
						<span style="font-size: .8rem;">{{item.FromPortName}}</span>
					</p>
				</view>
				<view class="m">
					<p>{{item.duration}}</p>
					<uv-icon width="180rpx" height="30rpx" name="/static/traffic/icon/goto.png"></uv-icon>
					<p>{{item.ShipName}}</p>
				</view>
				<view class="r" @click="navigateToSeat(item)">
					<view class="rl">
						<p class="time">{{item.ArriveTime}}</p>
						<p style="font-size: .8rem;">{{item.ToPortName}}</p>
					</view>
					<view class="rr" v-if="item.saleNum<1"
						style="display: flex;justify-content: center;align-items: center;">
						<p style="font-size: 60rpx;">售完</p>
					</view>
					<view class="rr" v-else="item.saleNum<1">
						<p style="font-size: 40rpx;color: #FF7D0E;">￥{{item.price}}</p>
						<p class="price count no-seat" v-if="item.butie">补贴 ￥<span>{{item.butie}}</span></p>
						<p class="price">官网价
							<span style="text-decoration: line-through;">￥{{item.MiniPrice}}</span>起
						</p>
						<p :class="['count',(item.saleNum>0&&item.saleNum<11)?'no-seat':'']" v-if="item.saleNum>0">
							{{item.saleNum < 11 ? '仅' : ''}}剩{{item.saleNum}}张
						</p>
					</view>
				</view>
			</view>
		</view>
		<!--预约入口-->
		<!-- <view @click="bookingEntry" class="booking-entry" style="" v-show="showPreorders&&is_show_preorders=='1'">
			<view class="booking-entry-container" style="">
				<p>航班预约</p>
				<p>排队入口</p>
			</view>
		</view> -->
		<!--预约入口-->
		<!-- <uv-tabbar :value="value" :fixed="true" @change="index=>value = index">
			<uv-tabbar-item text="筛选" icon="home"></uv-tabbar-item>
			<uv-tabbar-item text="价格" icon="home"></uv-tabbar-item>
			<uv-tabbar-item text="时间" icon="home"></uv-tabbar-item>
		</uv-tabbar> -->
	</view>

	<uv-calendars ref="calendars" :startDate="minDate" :endDate="maxDate" @confirm="onConfirm()" />
	<!-- popup -->
	<uv-popup customStyle="height: 40%" closeable mode="bottom" round ref="shipLineChoose">
		<div class="lines-pop-box">
			<p :class="[(item.lineId==nowLine.lineId)?'active':'']" @click="chooseLine(item)" v-for="item in lines">
				{{item.lineName}}
			</p>
		</div>
	</uv-popup>
</template>

<script>
	import {
		getDateText
	} from '@/common/public.js'
	import {
		formatDate
	} from '@/common/public.js'
	export default {
		data() {
			return {
				nowLine: {}, //当前航线
				nowDate: [],
				minDate: formatDate(new Date()), //开始日期
				maxDate: formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() +
					16)), //
				dateLength: 16, //从开始日期算可售日期天数
				dateList: [], //日期列表
				ticketDetail: [], //航班信息
				lines: [], //航班信息,
				js_btn_next_day: false, //下一天按钮显示
				tempData: {}
			}
		},
		onLoad(op) {
			this.nowDate = op.date;
			this.initDate();
			this.initLines(op.lineId);
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//查看下一天航班
			goNextDay: function() {
				this.nowDate = formatDate(new Date(this.nowDate).getTime() + 24 * 60 * 60 * 1000);
				this.getFlightData();
			},
			// 初始化航线
			initLines: function(lineId) {
				var _this = this;
				const app = getApp();
				uni.request({
					url: app.globalData.API_BASE_URL + 'ship/getShipLine',
					method: 'GET',
					data: {
						lineId: lineId
					},
					success(res) {
						if (res.statusCode === 200 && res.data.status > 0) {
							_this.lines = res.data.data.shipline;
						}
						_this.initNowLine(lineId);
					}
				})
			},
			// 初始化当前航线
			initNowLine: function(lineId) {
				for (var i = 0; i < this.lines.length; i++) {
					if (lineId == this.lines[i].lineId) {
						this.nowLine = this.lines[i];
						break;
					}
				}
				this.getFlightData();
			},
			//获取船票信息
			getFlightData: function() {
				var that = this;
				let num = 0;
				const app = getApp();

				uni.request({
					url: app.globalData.API_BASE_URL + 'ship/getShipFlight',
					method: 'GET',
					data: {
						sailDate: that.nowDate,
						lineId: that.nowLine.lineId
					},
					success(res) {
						if (res.statusCode === 200) {
							let tempData = res.data.data;

							//如果选择日期是最后一天不显示下一天
							var nowDate = ''
							if (nowDate == that.dateList[that.dateList.length - 1].ymd) {
								that.js_btn_next_day = false;
							} else {
								that.js_btn_next_day = true;
							}

							that.ticketDetail = tempData;
							let saleNum = 0;
							that.ticketDetail.forEach(function(v, i) {
								v.price = v.MiniPrice - 0;
								saleNum += parseInt(v.saleNum);
								if (v.saleNum >= 10) {
									num++;
								}
							})
							that.totalSaleNum = saleNum;
						}
					}
				})
			},

			// 初始化日期
			initDate: function() {
				for (var i = 0; i < this.dateLength; i++) {
					var date = new Date()
					date.setTime(date.getTime() + i * 24 * 60 * 60 * 1000);
					var year = date.getFullYear()
					var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() +
						1);
					var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
					var ymd = year + "-" + month + "-" + day;
					var text = getDateText(ymd, true);

					this.dateList.push({
						ymd,
						text,
						year,
						month,
						day,
						date,
						index: i
					})
				}
			},
			/*选择方块日期*/
			chooseDate: function(item, i) {
				if (false) {
					uni.showToast({
						position: true,
						title: '返程日期不能小于去程日期'
					})
					return false;
				}
				if (this.nowDate != item.ymd) {
					this.nowDate = item.ymd;
				}

				this.getFlightData()
			},
			//点击打开日历
			openCalendar() {
				this.$refs.calendars.open();
			},
			//日历插件点击确定
			onConfirm(date) {
				var that = this;
				this.nowDate = formatDate(date);
			},
			// 显示航线出发地与目的地选择
			showShipLines() {
				this.$refs.shipLineChoose.open()
			},
			chooseLine(line) {
				this.nowLine = line
			},
			navigateToSeat(seatData) {
				var _this = this
				uni.setStorageSync('selectSeatData', seatData)
				uni.navigateTo({
					url: '/pages/traffic/selectSeat?date=' + _this.nowDate + '&fromCityName=' + _this.nowLine
						.fromCityName + '&toCityName=' + _this.nowLine.toCityName
				})
			}
		}
	}
</script>

<style scoped>
	/* line.css */
	body,
	page {
		min-height: 100%;
		background: #EFF2F6;
	}

	body {
		background: #ffffff;
		max-width: 768px;
		margin: 0 auto !important;
	}

	[v-cloak] {
		display: none;
	}

	.container {
		background: #fff;
		padding: 50rpx 0 0;
	}

	.pd {
		padding: 0 1rem;
	}

	*,
	*::after,
	*::before {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.fix-top {
		position: fixed;
		width: 100%;
		background: #fff;
		top: 0;
		left: 0;
	}

	.fix-top .nav-header-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		height: 84rpx;
	}

	.fix-top .back-icon,
	.fix-top .right {
		width: 10%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.fix-top .title {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.fix-top .title p {
		font-size: 1.1rem;
	}

	.fix-top .title span {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin-left: .3rem;
	}

	.fix-top .title img {
		display: block;
		width: 1.2rem;
		margin: 0 .3rem;
	}

	.date-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 0 .8rem .2rem;
	}

	.date-box .date-l {
		width: 90%;
		overflow-x: scroll;
	}

	.date-box .date-l .date-inner {

		display: -webkit-box;

		display: -ms-flexbox;

		display: flex;
		width: 100%;
	}

	.date-box .date-l::-webkit-scrollbar {
		display: none;
	}

	.date-box .date-l .date-item {
		width: 15%;
		/*background:#3E8CF7 ;*/
		border-right: 1px solid #ebedf0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		border-radius: .3rem;
		padding: .2rem 0;
	}

	.date-box .date-l .date-item.active {
		background: #3E8CF7;
		border-right: unset;
	}

	.date-box .date-l .date-item.active p {
		color: #fff;
	}

	.date-box .date-l .date-item p {
		text-align: center;
		font-size: .9rem;
		font-weight: 700;
		color: #707070;
	}

	.date-box .date-l .date-item p.day {
		font-size: .8rem;
	}

	.date-box .date-r {
		width: 10%;
		webkit-box-shadow: -12px 0px 12px -12px rgb(0, 0, 0);
		-webkit-box-shadow: -12px 0px 12px -12px rgb(0, 0, 0);
		box-shadow: -12px 0px 12px -12px rgb(0, 0, 0);
	}

	.date-box .date-r #calendar {
		display: block;
		width: 50%;
		margin: 0 auto;
	}

	.date-box .date-r .b {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.lines-pop-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 2.5rem 2rem;
		height: 100%;
	}

	.lines-pop-box p {
		margin: 1rem;
		width: 36%;
		text-align: center;
		font-size: 1rem;
		border: 1px solid #000;
		padding: .4rem 0;
		border-radius: .3rem;
	}

	.lines-pop-box p.active {
		color: #1286F5;
		border-color: #1286F5;
	}

	.main-box {
		background: #EFF2F6;
		padding-bottom: 3.5rem;
	}

	.main-box .tips {
		background: #FEF3F2;
		padding: .2rem 1rem;
		font-size: .9rem;
		color: #FF7803;
	}

	.ad {
		position: relative;
	}

	.ad img {
		width: 100%;
		display: block;
	}

	.ad p {
		position: absolute;
		top: .5rem;
		right: .5rem;
	}

	.flight-list {
		padding: 0 .8rem;
	}

	.flight-list .flight-item {
		margin-top: .5rem;
		background: #fff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: .6rem .4rem;
		border-radius: .3rem;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.flight-list .no-seat {
		color: #999999 !important;
	}

	.flight-item.gray .l,
	.flight-item.gray .m,
	.flight-item.gray .r {
		/*grayscale(val):val值越大灰度就越深*/
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		-webkit-filter: gray;
		filter: gray;
		opacity: 0.4;
	}

	.flight-list .flight-item.gray p.time {
		color: #3E8CF7;
	}

	.flight-list .flight-item .l {
		width: 28%;
	}

	.flight-list .flight-item p.time {
		font-size: 1.2rem;
		font-weight: 700;
		color: #000;
	}

	.flight-item .l p,
	.flight-item .r p {
		font-size: .85rem;
		color: #3D3E3D;
	}

	.flight-item .m {
		width: 22%;
	}

	.flight-item .m p {
		font-size: .8rem;
		color: #707070;
		text-align: center;
	}

	.flight-item .m img {
		width: 100%;
		display: block;
	}

	.flight-item .r {
		width: 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.flight-item .rl {
		width: 57%;
	}

	.flight-item .rr {
		width: 45%;
	}

	.flight-item .r p {
		text-align: right;
	}

	.flight-item .rr p {
		text-align: center;
	}

	.flight-item .rr .price {
		color: #ADADAD;
		font-size: 20rpx;
	}

	.flight-item .rr .price span {
		font-size: 20rpx;
		font-weight: 700;
	}

	.flight-item .rr .count {
		font-size: 26rpx;
		color: #ADADAD;

	}

	.flight-item .rr .count.no-seat {
		border: 1px solid #FF7D0E;
		color: #FF7D0E;
		border-radius: .2rem;
	}

	.pop-main {
		background: #EFF2F6;
		height: 100%;
		overflow-y: scroll;
	}

	/*//隐藏滚动条*/
	.pop-main::-webkit-scrollbar {
		display: none;
	}

	.flight-pop-box {
		height: 100%;
	}

	.pop-header-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		height: 48px;
		/*position: fixed;*/
		/*top: 0px;*/
		/*left: 0;*/
		background: #fff;
	}

	.pop-header-box .back-icon,
	.pop-header-box .right {
		width: 10%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.pop-header-box .title {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.pop-header-box .title p {
		font-size: 1.1rem;
	}

	.pop-header-box .title span {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin-left: .3rem;
	}

	.flight-msg {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 1rem;
		background: #fff;

	}

	.flight-msg .l,
	.flight-msg .r {
		width: 37%;
	}

	.flight-msg .l p,
	.flight-msg .r p {
		font-size: .85rem;
		color: #3D3E3D;
	}

	.flight-msg .l p.time,
	.flight-msg .r p.time {
		font-size: 1.2rem;
		font-weight: 700;
	}

	.flight-msg .m {
		width: 28%;
	}

	.flight-msg .m p {
		text-align: center;
		color: #707070;
		font-size: .9rem;
	}

	.flight-msg .m img {
		width: 80%;
		display: block;
		margin: 0 auto;
	}

	.flight-msg .r p {
		text-align: right;
	}

	.seat-box {
		padding: 1rem 1rem 2rem;
	}

	.seat-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background: #fff;
		padding: .5rem;
		border-radius: .5rem;
		margin-bottom: 1rem;
	}

	.seat-item .l {
		width: 60%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.seat-item .l img {
		width: 5rem;
		height: 5rem;
		border-radius: .5rem;
		margin-right: .5rem;
	}

	.seat-item .l div .tit {
		font-size: .95rem;
		font-weight: 700;
	}

	.seat-item .l div .sub-tit {
		font-size: .9rem;
		color: #3D3E3D;
	}

	.seat-item .r .price {
		color: #FF7D0E;
		font-size: .9rem;
	}

	.seat-item .r .price span {
		font-size: 1.2rem;
		font-weight: 700;
	}

	.seat-item .r a {
		display: inline-block;
		color: #fff;
		background: #FF7D0E;
		width: 4rem;
		text-align: center;
		height: 2rem;
		line-height: 2rem;
		font-size: .9rem;
		border-radius: .3rem;
	}

	.seat-item .r .count {
		font-size: .8rem;
		color: #ADADAD;
		text-align: center;
	}

	.seat-item.no-seat .r a {
		background: #E6E6E6;
		color: #ADADAD;
	}

	.seat-item.no-seat .r .price {
		color: #ADADAD;
	}

	.seat-item.no-seat .r p {
		text-align: center;
	}

	.booking-entry {
		position: fixed;
		bottom: 3rem;
		right: 0;
		/* background: #FF685F; */
		background: -o-linear-gradient(right, #ff5858, #ff9b76);
		background: -webkit-gradient(linear, left top, right top, from(#ff5858), to(#ff9b76));
		background: -o-linear-gradient(left, #ff5858, #ff9b76);
		background: linear-gradient(to right, #ff5858, #ff9b76);
		border-radius: 100% 0 0 0;
		padding: 15px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		display: none;
		width: 86px;
		height: 74px;
		display: block;
		z-index: 99;
	}

	.booking-entry-container {
		color: #fff;
		position: relative;
		top: 8px;
		left: 10px;
	}

	.booking-entry-container p {
		font-size: .9rem;
		font-weight: bold;
	}

	.booking-entry-container p {
		font-size: .9rem;
		font-weight: bold;
	}

	.ship-line-empty {
		background: #fff;
		padding: 2rem 1rem;
	}

	.ship-line-empty img {
		max-width: 100%;
	}

	.ship-line-empty .ship-flight-notice,
	.ship-line-empty .ship-flight-notice span {
		background: none;
		text-align: center;
		font-size: 1rem;
	}

	.ship-line-empty .weui-btn {
		width: 60%;
		font-size: 1.2rem;
		margin-top: 1rem;
		height: 3rem;
		line-height: 3rem;
		border-radius: 50px;
		background: #ffeeee;
		border: 1px solid #ff5658;
		color: #ff5658;
	}

	.container-box {
		min-height: 100%;
	}

	.bottm-fix-box {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		background: #fff;
	}

	.bottm-fix-box a {
		width: 33%;
		color: #000;
		font-size: 1rem;
		text-align: center;
		height: 3rem;
		line-height: 3rem;
	}

	.notice-box .van-nav-bar__arrow {
		font-size: 20px;
		color: #000;
	}

	.notice-box .notice-main {
		padding: 1rem;

	}

	/* line.css END */

	.ship-line-notice-a {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		text-decoration: none;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}
</style>